const file = '各支队信号路口联网情况';
const fontSize = 32;
const barWidth = 140;
const items = [
  {
    name: '南岸区',
    value: 405,
    percent: 100
  },
  {
    name: '两江新区',
    value: 347,
    percent: 100
  },
  {
    name: '沙坪坝区',
    value: 369,
    percent: 100
  },
  {
    name: '九龙坡区',
    value: 382,
    percent: 100
  },
  {
    name: '巴南区',
    value: 347,
    percent: 100
  },
  {
    name: '江北区',
    value: 337,
    percent: 100
  },  
  {
    name: '高新区',
    value: 293,
    percent: 100
  },  
  {
    name: '大渡口区',
    value: 203,
    percent: 100
  },  
  {
    name: '渝中区',
    value: 189,
    percent: 100
  },  
  {
    name: '城市快速道路',
    value: 44,
    percent: 100
  },  
  {
    name: '北碚区',
    value: 293,
    percent: 98.6
  },  
  {
    name: '渝北区',
    value: 576,
    percent: 98.0
  }
];

// 按照value值从大到小排序
items.sort((a, b) => b.value - a.value);

// console.log(items);

const option = {
  grid: {
    top: 140,
    bottom: 140,
    left: '4%',
    right: '8%'
  },
  backgroundColor: '#fff',
  legend: {
    data: ['信号灯数量', {
      'name': '联网率', itemStyle: {
        color: '#5470c6'
      }
      }, {
        'name': '联网在线率', itemStyle: {
          color: '#fac858'
        }
      }],
    textStyle: {
      fontSize: 40
    },
    itemWidth: 56 * 1.8,
    itemHeight: 48,
    bottom: 20
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        interval: 0,
        fontSize: fontSize
      },
      data: items.map(item => item.name)
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 600,
      interval: 100,
      axisLabel: {
        fontSize: fontSize
      },
    },
    {
      type: 'value',
      splitLine: {
        show: false
      },
      min: 0.00,
      max: 100.00,
      interval: 10.00,
      axisLabel: {
        fontSize: fontSize,
        formatter: function (value) {
          // 对value进行字符串处理，保留小数点后的0
          return value.toFixed(2) + '%';
        }
      }
    }
  ],
  series: [
    // {
    //   name: '联网在线率',
    //   type: 'line',
    //   yAxisIndex: 1,
    //   lineStyle: {
    //     width: 10,
    //     color: '#fac858'
    //   },
    //   symbol: 'circle',
    //   symbolSize: 28,
    //   itemStyle: {
    //     color: "#fac858"
    //   },
    //   label: {
    //     show: true,
    //     position: 'top',
    //     offset: [0, 80],
    //     fontSize: fontSize,
    //     formatter: function (params) {
    //       // 对value进行字符串处理，保留小数点后的0
    //       return params.value.toFixed(1) + '%';
    //     }
    //   },
    //   data: [97.4, 98.0, 98.5, 97.0, 97.9, 99.4, 98.5, 96.6, 93.7, 95.5, 96.2, 97.6]
    // },
    {
      name: '信号灯数量',
      type: 'bar',
      barWidth: 80,
      label: {
        show: true,
        fontSize: fontSize,
        position: 'inside',
        color: '#fff'
      },
      itemStyle: {
        color: '#91cc75',
        borderRadius: [10, 10, 0, 0]
      },
      data: items.map(item => item.value)
    },
    {
      name: '联网率',
      type: 'line',
      yAxisIndex: 1,
      lineStyle: {
        width: 10,
        color: '#5470c6'
      },
      label: {
        show: true,
        position: 'top',
        offset: [0, -10],
        fontSize: fontSize,
        formatter: function (params) {
          // 对value进行字符串处理，保留小数点后的0
          return params.value.toFixed(1) + '%';
        }
      },
      symbol: 'circle',
      symbolSize: 28,
      itemStyle: {
        color: "#5470c6"
      },
      data: items.map(item => item.percent)
    }
  ]
};